<template>
  <div class="home">
    <a-row :gutter="20" class="homeMain">
      <a-col :span="16">
        <need-work @search="calendarSelect" />
        <div class="homeBox">
          <h2 class="workTitle">任务批次：{{ selectData }} {{ `${selectKey ? '(' + selectKey + ')' : ''}` }}</h2>
          <a-steps v-model="current" type="navigation" size="small" :style="stepStyle">
            <a-step status="process" title="处理数据任务" :disabled="clsjrwList && clsjrwList.length <= 0">
              <span slot="description" class="green" v-if="clsjrwList && clsjrwList.length > 0">
                已完成{{ workTitle.CLSJ_YWC_NUM }}</span
              >
              <span slot="description" :class="{ red: clsjrwList && clsjrwList.length > 0 }">
                {{ clsjrwList && clsjrwList.length > 0 ? `未完成 ${workTitle.CLSJ_WWC_NUM}` : '无任务' }}</span
              >
            </a-step>
            <a-step status="process" title="生成数据任务" :disabled="scsjrwList && scsjrwList.length <= 0">
              <span slot="description" class="green" v-if="scsjrwList && scsjrwList.length > 0">
                已完成{{ workTitle.SCSJ_YWC_NUM }}</span
              >
              <span slot="description" :class="{ red: scsjrwList && scsjrwList.length > 0 }">
                {{ scsjrwList && scsjrwList.length > 0 ? `未完成 ${workTitle.SCSJ_WWC_NUM}` : '无任务' }}</span
              >
            </a-step>
            <a-step status="process" title="生成报文任务" :disabled="scbwrwList && scbwrwList.length <= 0">
              <span slot="description" class="green" v-if="scbwrwList && scbwrwList.length > 0">
                已完成{{ workTitle.SCBW_YWC_NUM }}</span
              >
              <span slot="description" :class="{ red: scbwrwList && scbwrwList.length > 0 }">
                {{ scbwrwList && scbwrwList.length > 0 ? `未完成 ${workTitle.SCBW_WWC_NUM}` : '无任务' }}</span
              >
            </a-step>
            <a-step status="process" title="处理反馈任务" :disabled="clfkrwList && clfkrwList.length <= 0">
              <span slot="description" class="green" v-if="clfkrwList && clfkrwList.length > 0">
                已完成{{ workTitle.CLFK_YWC_NUM }}</span
              >
              <span slot="description" :class="{ red: clfkrwList && clfkrwList.length > 0 }">
                {{ clfkrwList && clfkrwList.length > 0 ? `未完成 ${workTitle.CLFK_WWC_NUM}` : '无任务' }}</span
              >
            </a-step>
          </a-steps>
          <a-table
            v-show="current === 0"
            :columns="workColumnsOne"
            :data-source="clsjrwList"
            size="middle"
            :rowkey="(record) => record.ID"
            :pagination="{
              hideOnSinglePage: true,
              pageSize: 10,
              onChange: (page) => getClsjrwQueryList({ pageNo: page }),
              ...clsjrwPagination,
            }"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record, '1')" :style="{ margin: '0 5px' }">{{
                record.ENDNUM === '0' ? '处理' : '查看'
              }}</a>
            </span>
          </a-table>
          <a-table
            v-show="current === 1"
            :columns="workColumnsTwo"
            :data-source="scsjrwList"
            size="middle"
            :rowkey="(record) => record.ID"
            :pagination="{
              hideOnSinglePage: true,
              pageSize: 10,
              onChange: (page) => getScsjrwQueryList({ pageNo: page }),
              ...scsjrwPagination,
            }"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record, '2')" :style="{ margin: '0 5px' }">{{
                record.ENDNUM === '0' ? '处理' : '查看'
              }}</a>
            </span>
          </a-table>
          <a-table
            v-show="current === 2"
            :columns="workColumnsThree"
            :data-source="scbwrwList"
            size="middle"
            :rowkey="(record) => record.ID"
            :pagination="{
              hideOnSinglePage: true,
              pageSize: 10,
              onChange: (page) => getScbwrwQueryList({ pageNo: page }),
              ...scbwrwPagination,
            }"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record, '3')" :style="{ margin: '0 5px' }">{{
                record.ENDNUM === '0' ? '处理' : '查看'
              }}</a>
            </span>
          </a-table>
          <a-table
            v-show="current === 3"
            :columns="workColumnsFore"
            :data-source="clfkrwList"
            size="middle"
            :rowkey="(record) => record.ID"
            :pagination="{
              hideOnSinglePage: true,
              pageSize: 10,
              onChange: (page) => getClfkrwQueryList({ pageNo: page }),
              ...scbwrwPagination,
            }"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record, '4')" :style="{ margin: '0 5px' }">打回重报</a>
            </span>
          </a-table>
        </div>
        <notice />
      </a-col>
      <a-col :span="8" style="overflow-x: hidden">
        <div class="homeBox">
          <a-calendar @select="calendarSelect" valueFormat="YYYY-MM-DD" class="myCalendar">
            <div
              slot="dateFullCellRender"
              slot-scope="value"
              :class="{ myDateDataBox: true, redBg: getListData(value).length > 0 }"
              @mouseenter="mouseenter"
            >
              <p class="myDateDataTitle">{{ filterDate(value) }}</p>
              <div class="myDateDataList">
                <ul class="events" v-if="getListData(value).length > 0">
                  <li v-for="item in getListData(value)" :key="item.id" class="whiteSpace">
                    {{ item }}
                  </li>
                </ul>
              </div>
              <div
                v-if="getListData(value).length > 0"
                :class="{ myDateData: true, myDateDataLeft: dateStatus, myDateDataRight: !dateStatus }"
              >
                <ul class="events">
                  <li v-for="item in getListData(value)" :key="item.id" class="whiteSpace" :title="item">
                    <a-badge status="processing" :text="item" />
                  </li>
                </ul>
              </div>
            </div>
            <!-- <template slot="monthCellRender" slot-scope="value">
              <div v-if="getMonthData(value)" class="notes-month">
                <section>{{ getMonthData(value) }}</section>
                <span>Backlog number</span>
              </div>
            </template> -->
          </a-calendar>
        </div>
        <!--
        <a-row :gutter="20" class="myWork">
          <a-col :span="8">
            <a-card title="本期报送" :bordered="false">
              <p class="red">失败：113240条</p>
              <p class="red">数量：1111100个</p>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card title="上报报文" :bordered="false">
              <p class="red">失败：35240条</p>
              <p class="red">数量：13100个</p>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card title="反馈报文" :bordered="false">
              <p class="red">失败：896640条</p>
              <p class="red">数量：24100个</p>
            </a-card>
          </a-col>
        </a-row>
        -->
      </a-col>
    </a-row>
    <HandelBackModal ref="handelBack"></HandelBackModal>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  clsjrwQueryList,
  scsjrwQueryList,
  scbwrwQueryList,
  fkclrwQueryList,
  queryCalendar,
  queryAllReportForms,
  queryTaskCount,
} from '@/api/api'
import NeedWork from './modules/home/NeedWork'
import Notice from './modules/home/Notice'
import HandelBackModal from './modules/home/backInfo/HandelBackModal.vue'
import moment from 'dayjs'

const workColumnsOne = [
  {
    title: '任务报表',
    width:30,
    dataIndex: 'REPORTNAME',
    ellipsis: true,
  },
  {
    title: '数据日期',
    width:15,
    dataIndex: 'SJRQ',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '任务截止日期',
    width:15,
    dataIndex: 'ENDDATE',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '任务批次',
    width:10,
    dataIndex: 'TASKBATCHNAME',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '剩余天数',
    width:10,
    dataIndex: 'SURPLUSDAYS',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '超期天数',
    width:10,
    dataIndex: 'OVERDUEDAYS',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '完成状态',
    width:10,
    dataIndex: 'ENDNUM',
    align: 'center',
    ellipsis: true,
    customRender:function (text) {
      return text=="1"?"已完成":"未完成";
    },
  },
  {
    title: '操作',
    width:10,
    dataIndex: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
const workColumnsTwo = [
  {
    title: '报文名称',
    width:30,
    dataIndex: 'REPORTNAME',
    ellipsis: true,
  },
  {
    title: '数据日期',
    width:15,
    dataIndex: 'SJRQ',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '任务截止日期',
    width:15,
    dataIndex: 'ENDDATE',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '频度',
    width:10,
    dataIndex: 'FREQUENCYNAME',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '剩余天数',
    width:10,
    dataIndex: 'SURPLUSDAYS',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '超期天数',
    width:10,
    dataIndex: 'OVERDUEDAYS',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '完成状态',
    width:10,
    dataIndex: 'ENDNUM',
    align: 'center',
    ellipsis: true,
    customRender:function (text) {
      return text=="1"?"已完成":"未完成";
    },
  },
  {
    title: '操作',
    width:10,
    dataIndex: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
const workColumnsThree = [
  {
    title: '报文名称',
    width:30,
    dataIndex: 'REPORTNAME',
    ellipsis: true,
  },
  {
    title: '主题分类',
    width:15,
    dataIndex: 'THEMENAME',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '数据日期',
    width:15,
    dataIndex: 'SJRQ',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '频度',
    width:10,
    dataIndex: 'FREQUENCYNAME',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '剩余天数',
    width:10,
    dataIndex: 'SURPLUSDAYS',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '超期天数',
    width:10,
    dataIndex: 'OVERDUEDAYS',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '完成状态',
    width:10,
    dataIndex: 'ENDNUM',
    align: 'center',
    ellipsis: true,
    customRender:function (text) {
      return text=="1"?"已完成":"未完成";
    },
  },
  {
    title: '操作',
    width:10,
    dataIndex: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
const workColumnsFore = [
  {
    title: '报文名称',
    width:10,
    dataIndex: 'REPORTID',
    ellipsis: true,
  },
  {
    title: '数据日期',
    width:15,
    dataIndex: 'SJRQ',
    ellipsis: true,
  },
  {
    title: '反馈日期',
    width:15,
    dataIndex: 'FKRQ',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '错误条数',
    width:5,
    dataIndex: 'CWTS',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '错误报表',
    width:30,
    dataIndex: 'REPORTNAME',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '反馈文件',
    width:30,
    dataIndex: 'REPOTFILENAME',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '完成状态',
    width:10,
    dataIndex: 'ENDNUM',
    align: 'center',
    ellipsis: true,
    customRender:function (text) {
      return text=="1"?"已完成":"未完成";
    },
  },
  {
    title: '操作',
    width:10,
    dataIndex: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]

const selectData = moment(new Date().getTime()).format('YYYY-MM-DD')
export default {
  name: 'Home',
  components: {
    NeedWork,
    Notice,
    HandelBackModal,
  },
  data() {
    return {
      current: 0,
      stepStyle: {
        marginBottom: '20px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset',
      },
      num: 10,
      workColumnsOne,
      workColumnsTwo,
      workColumnsThree,
      workColumnsFore,
      clsjrwList: [],
      clsjrwPagination: {},
      scsjrwList: [],
      scsjrwPagination: {},
      scbwrwList: [],
      scbwrwPagination: {},
      clfkrwList: [],
      clfkrwPagination: {},
      workTitle: {},
      fileData: [],
      filePagination: {},
      selectData,
      selectKey: '',
      dateStatus: false,
      screenWidth: 0,
      url: {
        downFileUrl: 'llbbStationNotice/llbbStationNotice/downFile',
      },
      listData: [],
      clsjrwUrlList: [],
    }
  },
  mounted() {
    this.screenWidth = window.screen.width
  },
  created() {
    this.calendarSelect({ sjrq: this.selectData })
    this.getAllReportForms()
    this.getCalendar()
  },
  methods: {
    getTaskCount(record) {
      queryTaskCount(record).then((res) => {
        if (res.code === 200) {
          this.workTitle = res.result || {}
        } else {
          this.workTitle = {}
          this.$message.warning(res.message)
        }
      })
    },
    filterDate(value) {
      return moment(value).format('DD')
    },
    filterWork(list = []) {
      const endnum = list.filter((item) => item.ENDNUM == '1').length
      const noendnum = list.filter((item) => item.NOENDNUM == '1').length
      return { endnum, noendnum }
    },
    // 处理数据任务
    getClsjrwQueryList(page) {
      clsjrwQueryList({ pageSize: 10, sjrq: this.selectData, ...page }).then((res) => {
        if (res.code === 200) {
          this.clsjrwList = res.result.records || []
          this.clsjrwPagination = {
            current: res.result.current,
            total: res.result.total,
          }
        } else {
          this.clsjrwList = []
          this.clsjrwPagination = {
            current: 1,
            total: 0,
          }
          this.$message.warning(res.message)
        }
      })
    },
    // 生成数据任务
    getScsjrwQueryList(page) {
      scsjrwQueryList({ pageSize: 10, sjrq: this.selectData, ...page }).then((res) => {
        if (res.code === 200) {
          this.scsjrwList = res.result.records || []
          this.scsjrwPagination = {
            current: res.result.current,
            total: res.result.total,
          }
        } else {
          this.scsjrwList = []
          this.scsjrwPagination = {
            current: 1,
            total: 0,
          }
          this.$message.warning(res.message)
        }
      })
    },
    // 生成报文任务
    getScbwrwQueryList(page) {
      scbwrwQueryList({ pageSize: 10, sjrq: this.selectData, ...page }).then((res) => {
        if (res.code === 200) {
          this.scbwrwList = res.result.records || []
          this.scbwrwPagination = {
            current: res.result.current,
            total: res.result.total,
          }
        } else {
          this.scbwrwList = []
          this.scbwrwPagination = {
            current: 1,
            total: 0,
          }
          this.$message.warning(res.message)
        }
      })
    },
    // 处理数据任务跳转
    getAllReportForms() {
      queryAllReportForms().then((res) => {
        this.clsjrwUrlList = res.result || []
      })
    },
    // 处理反馈任务
    getClfkrwQueryList(page) {
      fkclrwQueryList({ pageSize: 10, sjrq: this.selectData, ...page }).then((res) => {
        if (res.code === 200) {
          this.clfkrwList = res.result.records || []
          this.clfkrwPagination = {
            current: res.result.pages,
            total: res.result.total,
          }
        } else {
          this.clfkrwList = []
          this.clfkrwPagination = {
            current: 1,
            total: 0,
          }
          this.$message.warning(res.message)
        }
      })
    },
    // 待办跳转
    calendarSelect(record, key) {
      console.log('%c [ record ]-514', 'font-size:13px; background:pink; color:#bf2c9f;', record)
      this.selectData = record.sjrq
      let keyword = ''
      switch (key) {
        case 'overdueNum':
          keyword = '超期任务'
          break
        case 'sevenDayDueNum':
          keyword = '5-7天到期'
          break
        case 'fiveDayDueNum':
          keyword = '3-5天到期'
          break
        case 'threeDayDueNum':
          keyword = '1-3天到期'
          break
        case 'taskNum':
        default:
          keyword = ''
          break
      }
      this.selectKey = keyword
      this.getTaskCount(record)
      this.getClsjrwQueryList({ pageNo: 1, ...record })
      this.getScsjrwQueryList({ pageNo: 1, ...record })
      this.getScbwrwQueryList({ pageNo: 1, ...record })
      this.getClfkrwQueryList({ pageNo: 1, ...record })
    },
    mouseenter(e) {
      if (this.screenWidth - e.clientX > 330) {
        this.dateStatus = true
      } else {
        this.dateStatus = false
      }
    },
    htmls() {
      return <a-icon type="double-right" />
    },
    handleEdit(record, type) {
      let router = ''
      switch (type) {
        case '1':
          let data = this.clsjrwUrlList.filter((item) => item.reporttypecode === record.REPORTCODE)
          console.log('%c [ data ]-653', 'font-size:13px; background:pink; color:#bf2c9f;', data)
          if (data.length > 0) {
            router = `${data[0].reportUrl}?sjrq=${record.SJRQ}`
          }
          break
        case '2':
          console.log(2);
          router = `/llbb/report/llbbMessageStatus/LlbbMessageStatusList?theme=${record.THEME}&sjrq=${record.SJRQ}`
          break
        case '3':
          console.log(3);
          router = `/llbb/report/llbbMessageStatus/LlbbMessageStatusList?theme=${record && record.THEME}&sjrq=${
            record.SJRQ
          }`
          break
        case '4':
          //打回重报
          var params = {id:record.ID,sjrq:record.SJRQ,reporttypecode:record.REPORTCODE,reporttaskdate:record.SJRQ}
          this.$refs.handelBack.title = "打回重报";
          this.$refs.handelBack.show(params);
          this.$refs.handelBack.disableSubmit = true;
          break

        default:
          break
      }
      if(type!=4){
        if (router) {
          this.$router.push(router)
        } else {
          this.$message.warning('数据错误！')
        }
      }  
    },
    // 日历
    getCalendar() {
      queryCalendar({
        field:
          'id,,,bankNoCd,sjrq,startDate,endDate,reportCode,theme_dictText,taskBatch_dictText,reportType_dictText,taskType_dictText,taskDesc,action',
        pageNo: 1,
        pageSize: 4000,
      }).then((res) => {
        if (res.code === 200) {
          this.listData = res.result.records || []
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getListData(value) {
      return (
        (this.listData &&
          Array.from(
            new Set(
              this.listData
                .filter((item) => item.endDate === moment(value).format('YYYY-MM-DD'))
                .map((item) => item.taskType_dictText)
            )
          )) ||
        []
      )
    },
    getMonthData(value) {
      if (value.month() === 4) {
        return 1394
      }
    },
    getDateData(value) {
      let date = `${value.year()}-${value.month()}-${value.date()}`
      if (date === this.selectData) {
        return true
      }
    },
  },
}
</script>

<style scoped lang='less'>
@import url('./modules/home/style.less');
.red {
  color: red;
}
.green {
  color: green;
}
.home {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 10px;
  .homeMain {
    height: 100%;
    & > .ant-col {
      padding-top: 10px;
      height: 100%;
      box-sizing: border-box;
      overflow-y: auto;
    }
  }
}
/* 日历 */
.myCalendar /deep/ .ant-fullcalendar-selected-day .myDateDataBox {
  background: #e6f7ff;
}
// ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month
// ant-fullcalendar-next-month-btn-day
.myCalendar /deep/ .ant-fullcalendar-today .myDateDataBox .myDateDataTitle {
  border-top-color: #1890ff !important;
}
.myCalendar /deep/ .ant-fullcalendar-last-month-cell .myDateDataBox .myDateDataTitle {
  color: #e8e8e8;
}
.myCalendar /deep/ .ant-fullcalendar-next-month-btn-day .myDateDataBox .myDateDataTitle {
  color: #e8e8e8;
}
.myDateDataBox {
  cursor: pointer;
  height: 90px;
  color: #000;
  flex-direction: column;
  display: flex;
  transition: background 0.3s ease-in-out;
  .myDateDataList {
    flex: 1;
    overflow: hidden;
  }
  &.redBg {
    background: #1890ff !important;
    color: #fff;
  }
  .myDateDataTitle {
    padding: 0 5px;
    height: 26px;
    line-height: 26px;
    border-top: 2px solid #e8e8e8;
    margin: 0;
    text-align: right;
  }
  li {
    padding: 0 5px;
    line-height: 22px;
  }
  .myDateData {
    color: #000;
    background: #fff;
    box-shadow: 0 0 8px rgba(24, 144, 255, 0.5);
    position: absolute;
    top: 2px;
    padding: 10px;
    visibility: hidden;
    opacity: 0;
    border-radius: 5px;
    transition: opacity 0.4s ease-in-out;
    max-width: 150px;
    width: 150px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 9;
    li {
      line-height: 26px;
    }
    &.myDateDataLeft {
      right: auto;
      left: 100%;
    }
    &.myDateDataRight {
      right: 100%;
      left: auto;
    }
  }
  &:hover {
    background: #e6f7ff;
    .myDateData {
      visibility: visible;
      opacity: 1;
    }
  }
}
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
.homeBox {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  .hover();
}
.myWork {
  margin-bottom: 20px;
  .ant-card {
    .hover();
  }
  p {
    line-height: 26px;
    height: 26px;
    margin-bottom: 0;
  }
}
.myAllReport /deep/ .ant-card {
  .hover();
}
.workTitle {
  font-size: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
  color: #000;
  font-weight: 700;
}
.marginBtm {
  margin-bottom: 25px;
}
.whiteSpace {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
</style>
